<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a responsive email layout.">
    <title>XXForm 问卷题目管理</title>
    <link rel="stylesheet" th:href="@{/css/pure-min.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <script th:src="@{/js/vue-min.js}"></script>
    <script th:src="@{/js/main.js}"></script>
    <style>
        .input-radio {
            display: inline-block !important;
            margin-right: 10px !important;
        }
        .table button {
            margin-bottom: 5px;
        }
        .radio {
            display: inline-block !important;
            padding-top: .5em;
        }
        .pure-form p {
            padding:0 1em;
            margin-block-start: 0.5em;
            margin-block-end: 0.5em;
        }
        .s-items {
            margin: 0;
            padding: 0;
        }
        .s-items li {
            list-style: none;
            display: inline-block;
            font-size: 12px;
            padding: 4px;
            border: 1px solid #999;
            border-radius: 4px;
            margin-right: 4px;
        }
        .s-items li:hover {
            color: rgb(0, 122, 47);
            border-color: rgb(0, 122, 47);
        }
    </style>
</head>
<body>

<div id="layout" class="content pure-g">

    <div th:include="home/_nav.html" id="nav" class="pure-u"></div>

    <div id="main" class="pure-u-1">
        <div class="content">
            <div class="content-header pure-g">
                <div class="pure-u-1-2">
                    <h1 class="content-title">问卷题目管理</h1>
                    <p class="content-subtitle">
                        题目总数：<b class="count">{{allCount}}</b> 个
                    </p>
                </div>
                <div class="content-controls pure-u-1-2"></div>
            </div>
            <div class="content-body">
                <h3>问卷摘要</h3>
                <table class="pure-table pure-table-bordered" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>问卷主题</th>
                            <th>浏览量</th>
                            <th>提交量</th>
                            <th>时间</th>
                            <td>状态</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>{{paper.id}}</td>
                            <td>
                                {{paper.title}}<br>
                                <small style="color: #999;">{{paper.note}}</small>
                            </td>
                            <td>{{paper.views}}</td>
                            <td>{{paper.submits}}</td>
                            <td>
                                <small>
                                    创建：{{dateFormat(paper.createTime*1000,'y-m-d h:i')}}<br>
                                    修改：<span v-if="paper.updateTime>0">{{dateFormat(paper.updateTime*1000,'y-m-d h:i')}}</span><span v-else>-</span>
                                </small>
                            </td>
                            <td><small :class="statusStyles[paper.status]">{{statusTips[paper.status]}}</small></td>
                        </tr>
                    </tbody>
                </table>
                <h3>题目列表</h3>
                <table class="pure-table pure-table-bordered" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>题目</th>
                            <th>类型</th>
                            <th>选项</th>
                            <th>检查</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in dataList">
                            <td>{{item.id}}</td>
                            <td>{{item.subtitle}}</td>
                            <td>{{typeTips[item.type]}}</td>
                            <td>
                                <ul class="s-items" v-if="item.type!=3">
                                    <li v-for="(k,i) in item.options.split('\n')"><b>{{i+1}}</b>. {{k}}</li>
                                </ul>
                                <span v-else>-</span>
                            </td>
                            <td><span v-if="item.checked==1">是</span></td>
                            <td>
                                <button type="button" class="pure-button btn-xs btn-green" @click="edit(item.id)"><img src="/images/i-edit.png" /> 编辑</button>
                                <button type="button" class="pure-button btn-xs btn-orange" @click="del(item.id)"><img src="/images/i-del.png" /> 删除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <p>
                    <button type="button" class="pure-button btn-green" @click="adds"><img src="/images/i-add.png" /> 添加新题目</button>
                </p>
                
                <pagination ref="pageView"></pagination>
            </div>
        </div>
        <!--题目编辑框-->
        <div class="modal-wrap" v-show="editMode">
            <div class="modal-box">
                <div class="modal-title">编辑题目</div>
                <div class="modal-body">
                    <form class="pure-form pure-form-stacked">
                        <fieldset>
                            <div class="pure-g">
                                <div class="pure-u-1">
                                    <p>
                                        <label>题目标题:</label>
                                        <input type="text" class="pure-input-1" ref="subtitle" v-model="currentData.subtitle" />
                                    </p>
                                </div>
                                <div class="pure-u-1">
                                    <p>
                                        <label>选项值:<small class="orange"> (多个选项请换行输入)</small></label>
                                        <textarea class="pure-input-1" style="height: 8em;" ref="options" v-model="currentData.options"></textarea>
                                    </p>
                                </div>
                                <div class="pure-u-1-2">
                                    <p>
                                        <label>类型:</label>
                                        <select class="pure-input-1" v-model="currentData.type">
                                            <option v-for="(k,i) in typeTips" :value="i">{{k}}</option>
                                        </select>
                                    </p>
                                </div>
                                <div class="pure-u-1-2">
                                    <p>
                                        <label>检查:</label>
                                        <select class="pure-input-1" v-model="currentData.checked">
                                            <option v-for="(k,i) in checkedTips" :value="i">{{k}}</option>
                                        </select>
                                    </p>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="pure-button btn-normal" @click="editMode=false">取消</button>
                    <button type="button" class="pure-button btn-green" @click="save">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const LIMIT = 10;
    const vue = new Vue({
        el: '#main',
        data: {
            offset: 0,
            uid: '[[${session.uid}]]',
            pid: '[[${paperId}]]',
            keyword: '',
            paper: {},
            currentData: {
                id: 0,
                subtitle: '',
                options: '',
                type: 1,
                checked: 0,
                uid: this.uid
            },
            dataList: [],
            statusTips: {1: '隐藏', 2: '上线'},
            statusStyles: {1: 'orange', 2: 'green'},
            typeTips: {1: '单选', 2: '多选', 3: '填空'},
            checkedTips: {0: '不检查', 1: '检查'},
            allCount: 0,
            editMode: false
        },
        components: {
            pagination: Pagination
        },
        watch: {
            keyword: function () {
                vue.offset = 0;
                vue.loadList();
            }
        },
        methods: {
            init: function () {
                this.$refs['pageView'].init(LIMIT, 5);
                this.$refs['pageView'].setCallback(function (page) {
                    vue.offset = (page - 1) * LIMIT;
                    vue.loadList();
                });
                lets.get('/paper/get.do/'+this.pid).then(res => {
                    if (res.code == 1) {
                        this.paper = res.result;
                        this.loadList();
                    } else {
                        alert(res.error);
                    }
                });
            },
            adds: function () {
                this.currentData = {
                    id: 0,
                    pid: this.pid,
                    subtitle: '',
                    options: '',
                    type: 1,
                    checked: 0,
                    uid: this.uid
                };
                this.editMode = true;
            },
            edit: function (id) {
                lets.get('/subject/get.do/' + id).then(res => {
                    if (res.code == 1) {
                        this.currentData = res.result;
                        this.editMode = true;
                    } else {
                        alert(res.error);
                    }
                });
            },
            save: function () {
                if (this.currentData.subtitle == '') {
                    alert('题目不能留空');
                    this.$refs['subtitle'].focus();
                    return;
                }
                if (this.currentData.type != 3 && this.currentData.options == '') {
                    alert('非填空题的选项不能留空');
                    this.$refs['options'].focus();
                    return;
                }
                lets.post('/subject/save.do', this.currentData).then(res => {
                    if (res.code == 1) {
                        this.editMode = false;
                        this.loadList();
                    } else {
                        alert(res.error);
                    }
                });
            },
            del: function (id) {
                if (confirm('请慎重操作，删除后数据不可恢复哦！')) {
                    lets.post('/subject/delete.do', {
                        id: id,
                        uid: this.uid
                    }).then(res => {
                        if (res.code == 1) {
                            this.loadList();
                        } else {
                            alert(res.error);
                        }
                    });
                }
            },
            loadList: function () {
                lets.post('/subject/getCount.do', {pid: this.pid}).then(res => {
                    if (res.code == 1) {
                        this.allCount = res.result;
                        //this.$refs['pageView'].setData(res.result, this.offset == 0 ? true : false);
                    }
                });
                lets.post('/subject/getList.do', {pid: this.pid}).then(res => {
                    if (res.code == 1) {
                        this.dataList = res.result;
                    }
                });
            }
        }
    });
    vue.init();
</script>
</body>
</html>